import React, { Component } from 'react';
import { List, Button, TextArea } from 'antd-mobile'
import { connect } from 'react-redux'
import { actionAddMess, actionAddCar } from '../../store/actions'
class Index extends Component {
	state = {
		messValue: ''
	}
	// 处理评论
	handleMess = (id/*列表项id*/) => {
		// 新的评论数据
		const data = {
			id: Math.random().toString().slice(2),
			nickname: '游客',
			content: this.state.messValue,
			datetime: new Date().toLocaleString()
		}
		// 获取 action
		const action = actionAddMess({ id, data })
		// 分发 action
		this.props.dispatch(action)
		// 清空评论
		this.setState({ messValue: '' })	
	}
	// 处理加入购物车
	handleADDCar(v) {
		const action = actionAddCar(v)
		this.props.dispatch(action)
	}
	render() {
		const { location: { state } } = this.props
		const { url, title, desc, price, mess, id } = state
		const { messValue } = this.state
		return (
			<div>
				<img src={url} alt="" width="100%" height="200vh" />
				<h3>{title}</h3>
				<p>{desc}</p>
				<h5 style={{ color: 'red' }}>￥{price}</h5>
				<Button color="primary" block onClick={ () => this.handleADDCar(state) }>加入购物车</Button>
				<Button color="danger" block>立即购买</Button>
				<h2>评论</h2>
				<List>
					{
						mess.length > 0 && mess.map((v) => {
							return <List.Item
								key={v.id}
								description={v.content}
							>
								<p>{v.nickname}-{v.datetime}</p>
							</List.Item>
						})
					}
				</List>
				{/*  */}
				<TextArea
					placeholder='请输入评论内容'
					value={messValue}
					rows={5}
					onChange={val => {
						this.setState({ messValue: val })
					}}
				/>
				<Button block color="primary" onClick={() => this.handleMess(id)}>提交评论</Button>
			</div>
		);
	}
}

export default connect(state => state, dispatch => ({ dispatch }))(Index);
